<template>
    <div class="news">
        <div class="news-top">
            <span class="backIndex" @click="goIndex()">
                <img src="../assets/img/index/back.png" alt="">实时概况
            </span>
            <span>消息中心</span>
        </div>
        <div class="news-content">
            <ul>
                <li v-for="p,i of newsData">
                    <div>{{p.msgInfo}}</div>
                    <span>{{format(p.createTime)}}</span>
                </li>
            </ul>
        </div>
        <el-pagination @current-change="handleCurrentChange"  background layout="prev, pager, next" :page-count=pageCount></el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return{
            pageNum:8,//每页8条
            pageCount:null,//一共几页
            currentPage:'',//当前页码
            //消息列表
            newsData:[
                
                {
                    msgInfo:'',
                    createTime:''
                }
            ],
        }
    },
    mounted(){
        this.currentPage=1
        this.getRechargeData()
        this.changeNewsState()
    },
    methods:{
        //跳转回首页
        goIndex(){
            this.$router.push('/index')
        },
        //分页
        handleCurrentChange(page) {
          this.currentPage=page
          this.getRechargeData()
        },
        //页码改变触发函数
        getRechargeData() {
              var userid = sessionStorage.getItem("uid");
              this.axios.post('/recharge/sys/warnmsg/list?limit='+this.pageNum+'&page='+this.currentPage+'&userid='+userid).then(result=>{
                  this.newsData=result.data.data.data.data;
                  this.pageCount = Math.ceil(result.data.data.data.count/this.pageNum);
              })
          },
          //将消息列表中的状态变成已读
          changeNewsState() {
            var userid = sessionStorage.getItem("uid");
            this.axios.post('/recharge/sys/warnmsg/changeState?userid='+userid).then(result=>{
              //console.log(result)
            })
          },
          //处理时间戳
          format(shijianchuo) {
            if(shijianchuo){
              var time = new Date(parseInt(shijianchuo)*1000);
              var y = time.getFullYear();
              var m = time.getMonth() + 1;
              var d = time.getDate();
              var h = time.getHours();
              var f = time.getMinutes();
              var s = time.getSeconds();
              //想要什么格式可以自己改
              // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
              return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            }
      },
      //小于10的时候，前边加0（08：08：12）
      add0(m) {
        return m < 10 ? '0' + m : m
      },
    },
    watch:{

    }
}
</script>

<style scoped>
.news{
    min-height:calc(100vh - 96px) ;
    padding: 30px 82px 20px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
}
/* 消息头 */
.news-top{
    font-size: 20px;
    display: flex;
    padding-left: 30px;
    margin-bottom: 15px;
}
.news-top .backIndex{
    color: #666;
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.news-top img{
    width: 22px;
    height: 28px;
    margin-right: 6px;
}
/* 消息列表 */
.news-content ul li{
    padding: 15px;
    border-radius: 6px;
    color: rgb(104, 104, 146);
    display: flex;
    justify-content: space-between;
}
.news-content ul li>div{
    width: calc(100% - 250px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* 分页 */
.el-pagination{
    text-align: center;
    margin-top: 30px;
}
</style>